/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="tab-menus" :style="{width: width + 'px', height: height + 'px'}">
        <div class="tab-menu-list">
            <div v-for="option in menuOptions"
                 class="tab-menu-item ellipsis"
                 :key="option"
                 :class="{active: option.value === checkValue}"
                 :title="option.label"
                 @click="changeTab(option.value)">
                <span v-html="render(option)"></span>
            </div>
        </div>
        <div class="tab-menu-empty"></div>
    </div>
</template>

<style lang="stylus">
    .tab-menus
        position relative
        display inline-block
        background #F2F2F2
        height 100%
        vertical-align top

        .tab-menu-list
            position absolute
            width 100%
            left 0
            top 0
            z-index 1

            .tab-menu-item
                width 100%
                padding-left 12px
                border-bottom 1px solid #DDDDDD
                border-right 1px solid #DDDDDD
                cursor pointer

                &.active
                    background white
                    border-right 1px solid white
                    color #4d8dd9
                    border-left: 4px solid #4d8dd9

                span
                    height 40px
                    line-height 40px
                    display inline-block
                    font-size 12px

        .tab-menu-empty
            position absolute
            border-right 1px solid #DDDDDD
            width 100%
            height 100%
            left 0
            top 0
            z-index 0
</style>

<script>

    /**
     * Created by hjh on 2018/6/16.
     */

    export default {
        props: {
            defaultWidth: {
                type: Number,
                'default': 150
            },

            defaultHeight: {
                type: Number
            },

            options: {
                type: Array,
                'default': () => []
            },

            render: {
                type: Function,
                'default': options => options.label
            },

            beforeChange: {
                type: Function,
                'default': () => true
            },

            value: {}
        },

        data () {
            return {
                width: this.defaultWidth,
                height: this.defaultHeight,

                checkValue: this.value === void 0 ? (this.options[0] || {}).value : this.value,
                menuOptions: this.options || []
            };
        },

        watch: {
            value (v) {
                this.checkValue = v;
            },

            options (v = []) {
                this.menuOptions = v;
            }
        },

        methods: {
            changeTab (value) {
                if (!this.beforeChange()) {
                    return false;
                }

                this.$emit('change', value, this.checkValue);
                this.$emit('input', value);

            }
        }
    };

</script>
